{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服</title>
    <!-- 引入 layui.css -->
    <link href="{%static '/css/layui.css'%}" rel="stylesheet">
    <link href="{%static '/css/bootstrap.min.css'%}" rel="stylesheet">
    <link href="{%static '/css/font-awesome.min.css'%}" rel="stylesheet">
    <style>
		.dropdown-menu-dark {
			color: #dee2e6;
			background-color: #46A1B4;
			border-color: rgba(0,0,0,.15);
		}
        .layui-layout-admin .header {
<!--            position: fixed;-->
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .col-md-4{
        width:33.3%;
        padding-left:0px;
        padding-right:110px;
        }
	</style>
    <!-- 引入 layui.js -->
    <script src="{%static '/js/layui.min.js'%}"></script>
</head>
<body>
<div>
    <div class="testimonial-wrapper">
        <div class="container">
            <div class="row client-content text-center">
                <div class="col-md-8">
                    <div class="row">
                        <h1>联系我们</h1>
                    </div>
                    <div class="row">
                        <div class="sub-headline">
                            <p>公司地址:{{comp_address}}</p>
                        </div>
                    </div>

                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            {% for contact_obj in contact_list%}
                          <div class="row">
                              <div class="col-md-8 col-md-offset-2">
                                  <p class="client-comment text-center">
                                      {{contact_obj.describe}}
                                  </p>
                              </div>
                              <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
                                  <img class="img-circle img-responsive center-block"
                                       src="{%static '/img/'%}{{contact_obj.qr_code}}" alt="{{contact_obj.name}}">
                                  <div class="row text-center">
                                      <p class="client-name text-center">{{contact_obj.name}}</p>
                                  </div>
                              </div>
                          </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="col-md-4" style="border-width:1px;border-color:red;">
                    <div >
                        <div class="text-center">
                            <h2>客户服务电话</h2>
                            <p>
                                0531-6865-9633
                            </p>
                        </div>

                        <div >
                            <div class="form">
                                <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                    <input class="form-control" id="full_name" type="text" placeholder="Full Name *" required>
                                </div>
                                <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                    <input class="form-control" id="email_address" type="text" placeholder="Email Address *" required>
                                </div>
                                <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                    <input class="form-control" id="app_date" type="text" placeholder="Appointment Date *"
                                           required>
                                </div>
                                <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                    <input class="form-control" id="mobile" type="text" placeholder="Mobile Number *" required>
                                </div>
                            </div>
                            <div class="input-group margin-bottom-sm col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                <textarea class="form-control" id="problem" rows="6" placeholder="Your Problem *"
                                          required></textarea>
                            </div>
                            <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                                <div class="captcha-container">
                                    <label>Are you human? </label>
                                    <input type="text" id="human" class="captcha required" name="captcha" maxlength="5"
                                           title=" Please enter the code characters displayed in image!">
                                </div>
                                <button type="button" id="btn_send" class="layui-btn layui-btn-primary">Send</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 layui.js -->
<script src="{%static '/js/layui.min.js'%}" charset="utf-8"></script>

<script>
    layui.use(['layer','jquery','carousel', 'form'], function(){
        var $ = layui.jquery,
            layer = layui.layer,
            carousel = layui.carousel,
            laydate = layui.laydate,
            form = layui.form;

          carousel.render({
            elem: '#test1'
            ,arrow: 'always'
          });
        laydate.render({
            elem:"#app_date"
        });
        $("#btn_send").click(function(){
            $.ajax({
                   url:"/api/service/Service/",
                   type:"POST",
                   dataType:"json",
                   data:{
                       "full_name": $("#full_name").val(),
                        "email_address":$("#email_address").val(),
                        "app_date":$("#app_date").val(),
                        "mobile":$("#mobile").val(),
                        "problem":$("#problem").val(),
                        "human":$("#human").val()
                   },
                   success:function(data){
                       if(data.code="200"){
                           $("#full_name").val("");
                           $("#email_address").val("");
                           $("#app_date").val("");
                           $("#mobile").val("");
                           $("#problem").val("");
                           $("#human").val("");
                           layer.msg("已添加成功，谢谢你的反馈");
                       }
                   }
            });
        });
    });
</script>
</body>
</html>